<template>
  <div>
    <div>
      <div class="main">
        <div class="top"></div>
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
      <div class="left">
        <el-scrollbar style="height: 100%">
          <ul class="list">
            <li class="list-item" v-for="(v, k) in map" v-bind:key="k">
              <router-link :to="v">{{ k }}</router-link>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import map from "@/assets/map.json";

for (let k in map) {
  // console.log('key: ' + k + ' , value: ' + map[k]);
}
export default {
  components: {},
  data() {
    return {
      map: map,
    };
  },
};
</script>
<style>
.left {
  width: 5px;
  background-color: #bcaa2d;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transition: width 500ms 1s;
}
.left:hover {
  width: 230px;
  transition: width 200ms 200ms;
}
.list {
  padding: 0px;
  margin: 0px;
}
.list-item {
  padding: 10px 10px;
  list-style: none;
}
.content {
  padding: 20px;
  background-color: #dcefdb;
  color: darkslategray;
}
.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
